<template>
    <div class="internationalization-container">
        <div class="flex justify-between items-center">
            <h2>国际化</h2>
            <div class="flex items-center">
                <el-button type="primary"><a href="http://localhost:3000/i18n/import">导入</a></el-button>
                <el-button type="primary"><a href="http://localhost:3000/i18n/export?format=json&languageTags=zh-CN&download=true&filename=i18n-data">导出</a></el-button>
                <el-button type="primary" @click="handleCreate">新增</el-button>
            </div>
        </div>
        <div>
            <el-table :data="tableList" style="width: 100%" size="large">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="language_tag" label="语言标签" width="120" />
                <el-table-column prop="code" label="国际化标识" />
                <el-table-column prop="message" label="文本值" />
                <el-table-column prop="remarks" label="备注" />
                <el-table-column prop="created_at" label="创建时间" />
                <el-table-column fixed="right" label="操作" min-width="40">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-popconfirm title="您确定删除吗？" @confirm="handleDelect(scope.row)" confirm-button-text="确定"
                            cancel-button-text="取消">
                            <template #reference>
                                <el-button link type="primary" size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container flex justify-center footer">
            <el-pagination background layout="prev, pager, next" :page-size="pageSize"
                v-model:current-size="currentPage" :total="total" @current-change="handleCurrentChange" />
        </div>
        <!-- 引入遮罩层组件 -->
        <EditDialog ref="editDialogRef" @save="handleSave" :refresh-list="il18List" />
    </div>
</template>

<script lang="ts" setup>
import { i18nListApi, i18nDeleteApi, i18nUpdateApi, i18nCreateApi } from '@/api/internationalization'
import { ref, onMounted } from 'vue'
import EditDialog from '@/in18/page.vue'

const tableList = ref([])
const total = ref(1)
const currentPage = ref(1)
const pageSize = ref(10)

// 不再需要 mode 变量，因为 page.vue 组件内部处理了类型

// 分页切换
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    il18List()
}

const editDialogRef = ref()

const handleEdit = (row: any) => {
    console.log('编辑', row)
    editDialogRef.value.showEditDialog(row)
}

// 删除
const handleDelect = (row: any) => {
    // console.log('删除', row.id)
    i18nDeleteApi(row.code).then(res => {
        console.log(res)
        il18List()
    })
}

// 新增
const handleCreate = () => {
    console.log('新增')
    editDialogRef.value.showAddDialog()
}



function il18List() {
    i18nListApi({ current: currentPage.value + '', currentSize: pageSize.value + '' }).then(res => {
        console.log(res)
        tableList.value = res.data.records
        total.value = res.data.total
    })
}

// 处理保存数据
const handleSave = (formData: any) => {
    console.log('保存数据', formData)
    try {
        const requestData = {
            code: formData.code,
            remarks: formData.remarks || '',
            languageTexts: [
                {
                    languageTag: formData.language_tag,
                    message: formData.message
                }
            ]
        }

        console.log('发送的数据格式:', requestData)

        // 根据类型调用不同的API
        if (formData.type === 'edit') {
            // 编辑操作
            i18nUpdateApi(requestData).then(res => {
                console.log('编辑成功', res)
                il18List()
            })
        } else {
            // 添加操作
            i18nCreateApi(requestData).then(res => {
                console.log('添加成功', res)
                il18List()
            })
        }
    } catch (error) {
        console.error('保存数据时出错:', error)
    }
}

onMounted(() => {
    il18List()
})

</script>

<style scoped>
.internationalization-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
